<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swipeable Pages</title>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #c81a1a;
        }
        .pages-container {
            display: flex;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch; /* Enable momentum scrolling on iOS */
            height: 100vh;
            scroll-snap-type: x mandatory;
        }
        .page {
            min-width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            scroll-snap-align: start;
            transition: transform 0.3s ease-in-out;
        }
        .page:nth-child(odd) {
            background-color: #fff;;
        }
        .page:nth-child(even) {
            background-color: #fff;;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 99%;
            margin: 0px auto;
            padding: 0px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .word {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 45%;
            width: 95%;
            margin: 5px auto;
            padding: 5px;
            background-color: #a2db53;
            border-radius: 2px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            font-size: 2em;
            margin-bottom: 20px;
        }
        .phonetic {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 20%;
            width: 95%;
            margin: 2px auto;
            padding: 2px;
            background-color: #5375db;
            border-radius: 2px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            font-size: 1.2em;
            color: #666;
            margin-bottom: 10px;
        }
        .chinese {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 35%;
            width: 95%;
            margin: 10px auto;
            padding: 10px;
            background-color: #f39feb;
            border-radius: 2px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            background-color: yellow;
            color: black;
            font-size: 1.2em;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="pages-container">
    <div class="page">
        <!-- <h1>Page 1</h1> -->
        <div class="container"  onclick="getNext();">
            <div class="word">
                <h1 id="english" >random</h1>
            </div>
            <div class="phonetic">
                <p  id="ipa" >/ˈrændəm/</p>
                <p  id="samap" >/ˈwindəʊ/</p>
            </div>
            <div class="chinese">
                <p  id="chineseMean" >随机数</p>
            </div>
        </div>
    </div>
    <!-- <div class="page">
        <h1>Page 2</h1>
    </div> -->
</div>

<script>
    const container = document.querySelector('.pages-container');
    let currentPage = 0;

    container.addEventListener('touchstart', handleTouchStart, false);
    container.addEventListener('touchmove', handleTouchMove, false);

    let touchStartX = null;

    function handleTouchStart(event) {
        touchStartX = event.touches[0].clientX;
    }

    function handleTouchMove(event) {
        if (touchStartX === null) return;
        const touchEndX = event.touches[0].clientX;
        const deltaX = touchStartX - touchEndX;

        if (deltaX > 50 && currentPage < container.children.length - 1) {
            // Swipe right
            currentPage++;
            container.style.transform = `translateX(-${currentPage * 100}vw)`;
        } else if (deltaX < -50 && currentPage > 0) {
            // Swipe left
            currentPage--;
            container.style.transform = `translateX(-${currentPage * 100}vw)`;
        }
        touchStartX = null;
    }

    function getNext(){
        $.ajax({
            cache: true,
            type: "GET",
            url:"http:127.0.0.1:10001/english/random",
            async: false,
            error: function(request) {
                alertify.alert("错误：服务器异常！");
            },
            success: function(data) {
                if(data.success){
                    var word = data.user;
                    $("#english").val(word.word);
                    $("#ipa").val(word.ipa);
                    $("#samap").val(word.samap);
                    $("#chineseMean").val(word.chineseMean);
                }else{
                    alertify.alert("错误:" + data.message);
                }
            }
        });
    }

</script>
</body>
</html>